<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="Lines2">
    <div id="Lines2" style="width: 50%; height: 300px"></div>
  </div>
</template>

<script>
import { getarea } from '@/api/user.js'
export default {
  // props: ['Point'],
  data () {
    return {
      area: []
    }
  },
  async beforeCreate () {
    const area = await getarea()
    const data = area.data
    // const data1 = area.data
    await this.myEcharts(data)
  },
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Lines2',
  methods: {
    myEcharts (data) {
      const myChart = this.$echarts.init(document.getElementById('Lines2'))
      // 配置图表
      console.log(data)
      const option = {
        color: ['rgba(50, 229, 255, 1)', 'rgba(250, 207, 18, 1)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          top: '40%',
          left: '60%',
          right: '80%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.xAxis,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#7B68EE'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'blue',
                width: 1,
                type: 'solid'
              }
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '                {legend|}  {value|柱状图}',
            axisLabel: {
              color: '#FF6347'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFDEAD'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'blue',
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              rich: {
                legend: {
                  width: 12,
                  height: 4,
                  backgroundColor: '#EE82EE'
                },
                value: {
                  color: '#FF8C00'
                }
              }
            }
          },
          {
            type: 'value'
            // name: '{legend|}  {value|折线图}           ',
            // axisLabel: {
            //   color: '#00BFFF'
            // },
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: '#66CDAA'
            //   }
            // },
            // splitLine: {
            //   lineStyle: {
            //     color: '#E6E6FA',
            //     width: 1,
            //     type: 'solid'
            //   }
            // },
            // nameTextStyle: {
            //   rich: {
            //     legend: {
            //       width: 12,
            //       height: 4,
            //       backgroundColor: '#87CEFA'
            //     },
            //     value: {
            //       color: '#CD853F'
            //     }
            //   }
            // }
          }
        ],
        series: [

          {
            name: '柱状图',
            type: 'bar',
            data: [80, 120, 110, 130, 120, 110],
            barWidth: 14, // 柱状图的宽度
            itemStyle: {
              borderRadius: 8,
              color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(50, 229, 255, 1)' },
                { offset: 1, color: 'rgba(50, 229, 255, 0.8)' }
              ])
            }
          },
          {
            name: '折线图',
            type: 'line',
            yAxisIndex: 1,
            data: data.series,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(183, 75, 238)'
                },
                {
                  offset: 1,
                  color: 'rgba(250, 207, 18)'
                }
              ])
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(183, 75, 238,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(250, 207, 18)'
                }
              ])
            },
            showSymbol: false
          }
        ]
      }
      myChart.setOption(option)
    }

  }
  // mounted () {
  //   this.myEcharts()
  // }
}
</script>

<style></style>
